<extend name="template/base_index" />


<block name="area_header">
    <link rel="stylesheet" type="text/css" media="all" href="__CDN__/jquery-datetimepicker/jquery.datetimepicker.css">
    <!--<link type="text/css" rel="stylesheet" href="__CDN__/amazeui/2.3.0/css/amazeui.min.css" />-->
    <script type="text/javascript" src="__CDN__/jquery-datetimepicker/jquery.datetimepicker.js"></script>
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="__JS__/excanvas.min.js"></script><![endif]-->
    <script type="text/javascript" src="__JS__/echarts.min.js"></script>
</block>

<block name="area_body">
    {:W('Menus/topbar')}
    <div class="admin-main container-fluid">
        {:W('Menus/left')}
        <div class="admin-main-content">
            {:W('Menus/breadcrumb')}
            <div id="container" style="width: 600px;height:400px;"></div>
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('container'));

                // 指定图表的配置项和数据
                option = {
                    title: {
                        text: '堆叠区域图'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['用户关注数量']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            min:4000,
                            data : {$time}
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            min:{$min},
                            max:{$max}
                        }
                    ],
                    series : [
                        {
                            name:'用户关注数量',
                            type:'line',
                            stack: '总量',
                            areaStyle: {normal: {}},
                            data:{$data}
                        }
                    ]
                };


                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            </script>

        </div>
        <!-- END admin-main-content -->
    </div>
    <!-- END admin-main-->
</block>

<block name="area_footer">

</block>